<template>
  <van-popup
    v-model="value"
    position="bottom"
    :close-on-click-overlay="false"
    @click-overlay="onClose"
  >
    <div>
      <div class="van-hairline--top-bottom van-actionsheet__header">
        <div>{{title}}</div>
        <van-icon name="close" @click="onClose" />
      </div>
      <van-cell-group class="list" v-if="list.length>0">
        <van-cell class="item" v-for="(item,index) in list" :key="index">
          <van-row type="flex" justify="space-between">
            <van-col span="18">
              <div class="title">{{item.showTitle}}</div>
              <div class="name">{{item.coupon_name}}&nbsp;&nbsp;{{item.showInfo}}</div>
              <div class="time">{{item.showTerm}}</div>
            </van-col>
            <van-col span="6" class="flex-auto-center flex-end">
              <van-button
                class="btn-use"
                :disabled="getType == 1 && item.selected ? true : false"
                :loading="isLoading"
                type="danger"
                size="small"
                @click="onUse(item)"
              >{{btnText}}</van-button>
            </van-col>
          </van-row>
        </van-cell>
      </van-cell-group>
      <LoadMoreEnd :finished="true" :text-background="'#ffffff'" v-else />
    </div>
    <div class="foot-btn-group">
      <van-button size="normal" block round type="default" @click="onClose">关闭</van-button>
    </div>
  </van-popup>
</template>

<script>
import { formatDate } from "@/utils/util";
import LoadMoreEnd from "@/components/LoadMoreEnd";
import { RECEIVE_COUPON } from "@/api/coupon";
export default {
  data() {
    return {
      isLoading: false
    };
  },
  props: {
    items: {
      type: Array
    },
    value: {
      type: Boolean,
      default: false
    },
    shop_id: {
      type: [String, Number]
    },
    index: [String, Number],
    title: String,
    /**
     * 获取类型
     * 1 ==> 订单获取
     * 2 ==> 首页获取
     * 3 ==> 注册营销获取
     * 4 ==> 购物车获取
     * 5 ==> 商品详情获取
     */
    getType: {
      type: [String, Number],
      required: true
    }
  },
  computed: {
    btnText() {
      return this.getType == 1 ? "使用" : "领取";
    },
    list() {
      const $this = this;
      const newItems = $this.items
        ? $this.items.map(e => {
            var money = parseFloat(e.money),
              at_least = parseFloat(e.at_least),
              discount = parseFloat(e.discount);
            if (e.coupon_genre == 1) {
              e.showTitle = money + "元";
              e.showInfo = "无门槛" + money + "元";
            } else if (e.coupon_genre == 2) {
              e.showTitle = money + "元";
              e.showInfo = "满" + at_least + "元减" + money + "元";
            } else if (e.coupon_genre == 3) {
              e.showTitle = discount + "折";
              e.showInfo = "满" + at_least + "元" + discount + "折";
            }
            e.showTerm =
              "使用期限 " +
              formatDate(e.start_time) +
              " ~ " +
              formatDate(e.end_time);
            return e;
          })
        : [];
      return newItems;
    }
  },
  methods: {
    onClose() {
      this.$emit("input", false);
    },
    onUse(item) {
      const $this = this;
      if ($this.getType == 1) {
        if (item.selected) {
          $this.$emit("cancel", item);
        } else {
          $this.$emit("use", item, $this.shop_id, $this.index);
        }
      } else {
        const params = {};
        params.coupon_type_id = item.coupon_type_id;
        params.get_type = $this.getType;
        $this.isLoading = true;
        RECEIVE_COUPON(params)
          .then(res => {
            $this.$Toast.success("领取成功");
            $this.isLoading = false;
            $this.onClose();
          })
          .catch(() => {
            $this.isLoading = false;
          });
      }
    }
  },
  beforeDestroy() {
    this.onClose();
  },
  components: {
    LoadMoreEnd
  }
};
</script>

<style scoped>
.list {
  max-height: 60vh;
  overflow-y: auto;
}

.item .van-col > div {
  line-height: 1.4;
}

.item .title {
  font-weight: 700;
  color: #ff454e;
}

.item .name {
  max-height: 38px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  word-break: break-all;
  margin-bottom: 4px;
}

.item .time {
  font-size: 12px;
  color: #606266;
}

.btn-cancel {
  color: #f44;
  background-color: #ff4444;
  border: 1px solid #ff4444;
  background: #fff;
}

.flex-end {
  justify-content: flex-end;
}
</style>